<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户个人中心 - 智能旅游路线推荐系统</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
    <style>
        .profile-header {
            background-color: #f8f9fa;
            padding: 2rem 0;
            margin-bottom: 2rem;
        }
        .profile-img {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            object-fit: cover;
            border: 5px solid #fff;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        .loading {
            text-align: center;
            padding: 2rem;
        }
    </style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
    <div class="container">
        <a class="navbar-brand" href="/travel/">智能旅游路线推荐</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="/travel/">首页</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/travel/generate">生成行程</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link active" href="/travel/user-profile">个人中心</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<div class="profile-header">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-md-3 text-center">
                <img id="profile-img" src="/images/default-avatar.png" alt="用户头像" class="profile-img">
            </div>
            <div class="col-md-9">
                <h2 id="user-nickname">加载中...</h2>
                <p id="user-role" class="badge bg-secondary">加载中...</p>
                <p id="user-joined">注册时间: 加载中...</p>
            </div>
        </div>
    </div>
</div>

<div class="container">
    <div id="loading" class="loading">
        <div class="spinner-border text-primary" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
        <p>正在加载用户信息...</p>
    </div>
    
    <div id="profile-content" style="display: none;">
        <div class="row">
            <div class="col-md-4">
                <div class="card mb-4">
                    <div class="card-header">基本信息</div>
                    <div class="card-body">
                        <p><strong>用户名：</strong> <span id="username"></span></p>
                        <p><strong>昵称：</strong> <span id="nickname"></span></p>
                        <p><strong>电话：</strong> <span id="phone"></span></p>
                        <p><strong>邮箱：</strong> <span id="email"></span></p>
                    </div>
                </div>
            </div>
            <div class="col-md-8">
                <div class="card mb-4">
                    <div class="card-header">会员信息</div>
                    <div class="card-body">
                        <p><strong>会员等级：</strong> <span id="membership-level"></span></p>
                        <p><strong>积分：</strong> <span id="points"></span></p>
                        <p><strong>过期时间：</strong> <span id="expiry-date"></span></p>
                    </div>
                </div>
                
                <div class="card">
                    <div class="card-header">最近行程</div>
                    <div class="card-body">
                        <p id="no-trips" style="display: none;">暂无行程记录</p>
                        <div id="recent-trips">
                            <!-- 行程会通过JavaScript动态加载 -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div id="error-message" class="alert alert-danger" style="display: none;"></div>
</div>

<footer class="bg-light py-3 mt-5">
    <div class="container text-center">
        <p>&copy; 2023 智能旅游路线推荐系统</p>
    </div>
</footer>

<!-- 引入配置和服务脚本 -->
<script src="/js/config.js"></script>
<script src="/js/user.js"></script>
<script>
    // 页面加载完成后执行
    document.addEventListener('DOMContentLoaded', async function() {
        // 检查是否已登录
        const token = localStorage.getItem('token');
        if (!token) {
            // 未登录，重定向到登录页面
            window.location.href = '/travel/login';
            return;
        }
        
        try {
            // 获取用户信息
            const result = await UserService.getMyProfile();
            
            if (result.success && result.data) {
                const user = result.data;
                
                // 隐藏加载中提示，显示用户信息
                document.getElementById('loading').style.display = 'none';
                document.getElementById('profile-content').style.display = 'block';
                
                // 设置用户基本信息
                document.getElementById('user-nickname').textContent = user.nickname || user.username;
                document.getElementById('user-role').textContent = user.roleName || '普通用户';
                
                // 格式化注册时间
                const joinDate = new Date(user.registrationTime);
                document.getElementById('user-joined').textContent = `注册时间: ${joinDate.getFullYear()}-${joinDate.getMonth()+1}-${joinDate.getDate()}`;
                
                // 填充详细信息
                document.getElementById('username').textContent = user.username || '未设置';
                document.getElementById('nickname').textContent = user.nickname || '未设置';
                document.getElementById('phone').textContent = user.phoneNumber || '未设置';
                document.getElementById('email').textContent = user.email || '未设置';
                
                // 会员信息
                document.getElementById('membership-level').textContent = `Level ${user.membershipLevelId || 1}`;
                document.getElementById('points').textContent = user.poits || 0;
                
                // 格式化过期时间
                if (user.membershipExpiryDate) {
                    const expiryDate = new Date(user.membershipExpiryDate);
                    document.getElementById('expiry-date').textContent = `${expiryDate.getFullYear()}-${expiryDate.getMonth()+1}-${expiryDate.getDate()}`;
                } else {
                    document.getElementById('expiry-date').textContent = '未设置';
                }
                
                // 设置头像
                if (user.avatarUrl) {
                    // 使用本地路径加载头像
                    document.getElementById('profile-img').src = `/images/${user.avatarUrl}`;
                }
                
                // 如果有行程数据，则加载行程
                if (user.reservations && user.reservations.length > 0) {
                    document.getElementById('no-trips').style.display = 'none';
                    const tripsContainer = document.getElementById('recent-trips');
                    
                    user.reservations.forEach(trip => {
                        const tripElement = document.createElement('div');
                        tripElement.classList.add('card', 'mb-2');
                        tripElement.innerHTML = `
                            <div class="card-body">
                                <h5 class="card-title">${trip.spotName || '未命名行程'}</h5>
                                <p class="card-text">预定日期: ${new Date(trip.reserveDate).toLocaleDateString()}</p>
                                <a href="/travel/plan-detail?id=${trip.id}" class="btn btn-sm btn-primary">查看详情</a>
                            </div>
                        `;
                        tripsContainer.appendChild(tripElement);
                    });
                } else {
                    document.getElementById('no-trips').style.display = 'block';
                }
            } else {
                // 显示错误信息
                showError('获取用户信息失败: ' + (result.message || '请重新登录'));
            }
        } catch (error) {
            console.error('Error loading profile:', error);
            showError('加载个人资料时出错，请稍后再试');
        }
    });
    
    function showError(message) {
        document.getElementById('loading').style.display = 'none';
        const errorElement = document.getElementById('error-message');
        errorElement.textContent = message;
        errorElement.style.display = 'block';
    }
</script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html> 